<template>
  <div class="goodsContainer">
    <ul
      class="mui-table-view"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="isLoading"
      infinite-scroll-distance="100"
      style="max-height: 100vh; overflow-y: auto"
    >
      <li
        v-for="item in list"
        :key="item.index"
        class="mui-table-view-cell mui-media"
        @click="goToGoodsinfo(item.id)"
      >
        <!-- <router-link :to="'/home/newsinfo/' + item.id"> -->
        <img class="mui-media-object mui-pull-left" :src="item.img_url" />
        <div class="mui-media-body">
          <h3 class="tille">{{ item.title }}</h3>
          <p class="price">
            <span class="sellPrice">￥{{ item.sellPrice }}</span>
            <span class="markPrice">原价：{{ item.markPrice }}</span>
          </p>
          <p class="stock">库存：{{ item.stock }}</p>
          <button type="button" class="mui-btn mui-btn-danger">立即抢购</button>
        </div>
        <!-- </router-link> -->
      </li>
      <!-- 加载动画 -->
      <li class="more_loading">
        <mt-spinner
          class="spinner_p"
          type="fading-circle"
          v-show="is_loading_more"
        ></mt-spinner>
        <span v-show="finished">已经加载全部信息</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [], //商品列表
      isLoading: false, //默认相应上划动作
      pageindex: 1,
      pagesize: 10,
      is_loading_more: false, //控制加载图标是否出现
      finished: false, //控制加载全部数据后显示
    };
  },
  methods: {
    loadMore() {
      this.isLoading = true;
      this.is_loading_more = true; //截流，防止额外的请求数据，显示加载图标
      (this.finished = false),
        this.$ajax({
          method: "get",
          url: "/goods/goodslist",
          params: {
            pageindex: this.pageindex,
            pagesize: this.pagesize,
          },
        }).then((response) => {
          var data = response.data;
          if (data.Status == 0) {
            data.Data.forEach((item) => {
              item.add_time = new Date();
            });
            this.list = this.list.concat(data.Data);
            this.pagesize++;
            this.isLoading = false; //允许响应上划动作
            this.is_loading_more = false;
            if (data.Data.lenght < this.pagesize) {
              this.isLoading = true;
              this.finished = true; //加载完成
              this.is_loading_more = false;
            }
          } else {
            //服务器未响应
            this.finished = true;
          }
        });
    },
    goToGoodsinfo(goodsId) {
      this.$router.push({ name: "goodsinfo", params: { id: goodsId } });
    },
  },
};
</script>
<style lang="less">
.goodsContainer {
  .mui-table-view-cell {
    .mui-media-object {
      max-width: 120px;
      height: 100px;
    }
    .mui-media-body {
      .title {
        font-size: 16px;
        font-weight: bold;
        font-family: "微软雅黑";
        color: #333;
        padding-bottom: 18px;
      }
      .price {
        font-size: 12px;
        color: #888;
        margin: 0;
        .sellPrice {
          font-size: 18px;
          color: #ce0000;
          font-family: "微软雅黑";
          font-weight: bold;
          margin: 10px;
        }
        .markPrice {
          text-decoration: line-through;
        }
      }
      .mui-btn-danger {
        position: absolute;
        bottom: 20px;
        right: 10px;
      }
    }
    li.more_loading {
      font-size: 12px;
      color: #aaa;
      text-align: center;
      border: none;
      .spinner_p {
        position: relative;
        left: 45%;
      }
    }
  }
}
</style>